body,
html {
  height: 100%;
  width: 100vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  --elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --x: 0px;
  --y: 0px;
  --t: rgba(255, 255, 255, 0.001);
  --lightest: #f897d5;
  --light: #f567c2;
  --dark: #755ad0;
  --darkest: #1a2a6c;
  margin: 0;
  padding: 0;
  overflow: hidden; }

body * {
  box-sizing: border-box; }

.inner {
  display: inline-block;
  position: relative;
  pointer-events: all;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 0 0 500vmin #fff; }

.inner:hover:before {
  filter: blur(2px) brightness(1);
  background-size: 0px 0px, 100% 100%, 100%;
  transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out; }

.inner:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0rem;
  left: 0rem;
  filter: blur(2px) brightness(0);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, var(--t) 20%), radial-gradient(circle at center, var(--lightest), var(--light) 5%, var(--dark) 30%, var(--darkest) 50%), var(--darkest);
  background-size: 0px 0px, 0px 0px, 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;
  mix-blend-mode: lighten;
  z-index: 2;
  transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out, filter 0.5s ease-in-out;
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
  pointer-events: none; }

button {
  padding: 3.5rem 6rem;
  border: none;
  font-size: 1.5rem;
  position: relative;
  background: transparent;
  color: #fff;
  z-index: 2;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: clamp(-8px, calc((var(--width) / 2 - var(--x)) / 8), 8px) clamp(-8px, calc((var(--height) / 2 - var(--y)) / 8), 8px) 12px rgba(0, 0, 0, 0);
  transition: text-shadow 500ms var(--elastic); }
  button:hover {
    --shadow: max(
      calc(
        (var(--width) / 2 - var(--x)) / 8 +
          ((var(--height) / 2 - var(--y)) / 3)
      ),
      calc(
        (
            ((var(--width) / 2 - var(--x)) / 8) +
              ((var(--height) / 2 - var(--y)) / 3)
          ) * -1
      ),
      5px
    );
    text-shadow: clamp(-6px, calc((var(--width) / 2 - var(--x)) / 12), 6px) clamp(-4px, calc((var(--height) / 2 - var(--y)) / 16), 4px) var(--shadow) #000; }
  button:hover ~ .blob:before {
    transition: transform 500ms var(--elastic), box-shadow 1000ms var(--elastic);
    transform: translate(clamp(5%, calc(var(--x) - 50%), 550%), clamp(1rem, calc(var(--y) - 50%), 5rem)) scale(1.25);
    box-shadow: 0 0 0 0.05rem #fff, 0 -6rem 0 1.25rem #fff, 0 6rem 0 1.25rem #fff; }
  button:active {
    cursor: grab; }
  button:active:hover ~ .blob:before {
    box-shadow: 0 0 0 0rem #fff, 0 -5rem 0 1.75rem #fff, 0 5rem 0 1.75rem #fff;
    transition: transform 500ms var(--elastic), box-shadow 500ms var(--elastic);
    transform: translate(clamp(5%, calc(var(--x) - 50%), 550%), clamp(calc(50% + 1rem), calc(var(--y) - 50%), calc(50% + 1.5rem))) scale(1); }

.blob {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  filter: blur(12px) contrast(25);
  z-index: 1; }
  .blob:before, .blob:after {
    content: "";
    position: absolute;
    background: #000; }
  .blob:before {
    width: 15%;
    height: auto;
    z-index: 2;
    transition: transform 750ms var(--elastic), box-shadow 500ms var(--elastic);
    aspect-ratio: 1/1;
    box-shadow: 0 0 0 0.75rem #fff, 0 -8rem 0 -2rem #fff, 0 8rem 0 -2rem #fff;
    left: 0;
    top: 0;
    border-radius: 100%;
    transform: translate(clamp(10%, calc(var(--x) - 50%), 550%), clamp(1rem, calc(var(--y) - 50%), 5rem)) scale(0); }
  .blob:after {
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    top: 2rem;
    left: 2rem;
    border-radius: 5rem;
    box-shadow: 0 0 0 8rem #fff; }

/* Scss Document */
